██████╗ ███████╗████████╗██╗██████╗ ███████╗██████╗ ██╗ █████╗
██╔══██╗██╔════╝╚══██╔══╝██║██╔══██╗██╔════╝██╔══██╗██║██╔══██╗
██████╔╝█████╗ ██║ ██║██████╔╝█████╗ ██║ ██║██║███████║
██╔══██╗██╔══╝ ██║ ██║██╔═══╝ ██╔══╝ ██║ ██║██║██╔══██║
██║ ██║███████╗ ██║ ██║██║ ███████╗██████╔╝██║██║ ██║
╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═╝╚═╝ ╚══════╝╚═════╝ ╚═╝╚═╝ ╚═╝
- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Formattazione del testo
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
top
La mwawformattazione del testo è il procedimento di strutturazione e decorazione grafica che rende un mwbatesto puro adeguato alla mwbqstampa su mwbglibri, mwbwperiodici o mwcaquotidiani o alla visualizzazione su supporti digitali come i documenti dei programmi di mwcqvideoscrittura, mwcgsiti web o mwcwlibri elettronici.
Contents
• CSS
• Note
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
Descrizione
La formattazione si compone solitamente di più livelli. La strutturazione consiste della suddivisione del testo in unità logiche, come i mwdwcapitoli, i mweaparagrafi, i capoversi o le liste, puntate o numerate, o le mweqnote a piè di pagina. La decorazione assegna uno stile di presentazione agli elementi del testo, decidendo ad esempio il rientro dei paragrafi, la suddivisione in pagine e le caratteristiche dei caratteri: mwegtipi, dimensioni, mwewgrassetti, mwfacorsivi, interlinee, mwfqapici e pedici, ecc. Nel caso particolare di mwfgipertesti è presente un terzo livello di formattazione, oltre a questi primi due: quello dei mwfwcollegamenti che costituiscono rinvii ad altri ipertesti.
• fra mwkaasterischi per dare enfasi: mwkqLa nuova stampante si era *bloccata* un'altra volta.
• fra mwkwtrattini bassi per sottolineare: mwlaLa nuova stampante si era _bloccata_ un'altra volta.
• fra mwlgtrattini bassi per citare il titolo di un libro: mwlwPer avere un'idea del Software Libero si può iniziare leggendo il libro _Codice_Libero_.
• in mwmqmaiuscolo per i titoli: mwmgCAPITOLO 1: PER VOLONTA' DI UNA STAMPANTE
• in mwnamaiuscolo per urlare: mwnqLa nuova stampante si era BLOCCATA un'altra volta.
Oggi sono disponibili numerose mwrgapplicazioni per leggere, scrivere e modificare testo formattato (vedi mwrwInfra).
Utilizzo di un linguaggio di markup
Qualora non sia possibile formattare il testo con strumenti di supporto visuali inclusi in molti elaboratori testuali che propongono anche un'anteprima di come il testo comparirà sul supporto di destinazione (video, materiale cartaceo) è possibile utilizzare un mwswlinguaggio di markup (il più noto di essi è l'mwtaHTMLcite-ref-6[6]) che produce gli stessi risultati anche se presenta l'inconveniente di una complessità di scrittura in genere più elevata. La stessa mwuqWikipedia, nella modifica delle pagine tramite l'mwugeditor di testo, utilizza un linguaggio di markup molto semplificato interpretato dal software mwuwMediaWiki.
Un essere umano potrebbe trovare più o meno comprensibile un certo testo formattato a seconda della complessità del mwvqlinguaggio di markup in cui il testo è scritto. Esistono mwvglinguaggi di markup leggeri che consentono di scrivere testo formattato estremamente semplice da comprendere perché differisce poco dal relativo mwvwtesto puro. In mwwaaltri casi (SGML, XHTML, DocBook, ...) la complessità è così alta che una persona deve prima studiare il linguaggio stesso per essere in grado di comprendere il significato del relativo testo formattato.
CSS
Definizione del font
mwaap {font-family: arial;}
Caratteri sicuri per il Web
Esiste solo un numero limitato di caratteri disponibili su tutti i sistemi: essi possono quindi essere utilizzati senza troppe preoccupazioni. In inglese sono detti mwbaweb safe font:
| Nome | Tipo generico |
|---|---|
| Arial | senza grazie |
| Courier New | larghezza fissa |
| Georgia | con grazie |
| Times New Roman | con grazie |
| Trebuchet MS | senza grazie |
| Verdana | senza grazie |
Caratteri predefiniti nei CSS
| Termine | Definizione |
|---|---|
| serif | Caratteri tipografici con grazie |
| sans-serif | Caratteri tipografici senza grazie |
| monospace | Caratteri tipografici a larghezza fissa, generalmente utilizzati negli elenchi di codici. |
| cursive | Caratteri che hanno lo scopo di emulare la scrittura a mano, con tratti fluidi e collegati. |
| fantasy | Caratteri destinati a essere decorativi. |
Font stacks
Poiché non si può garantire la disponibilità dei caratteri che si desidera utilizzare sulle pagine web (anche un carattere web mwpapotrebbe non funzionare per qualche motivo), si possono definire dei "font stacks" in modo che il browser abbia più caratteri tra cui scegliere. Ciò implica un valore mwpqfont-family costituito da più nomi di caratteri separati da virgole, ad esempio:
p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
In tal caso, il browser si avvia all'inizio dell'elenco e verifica se quel carattere è disponibile sulla macchina. In caso affermativo, applica quel carattere agli elementi selezionati. In caso contrario, passa al carattere successivo e così via.
Incorporare font non standard
@font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); }
Tipi di font
• mw1qWOFF / WOFF2
Sta per: Web Open Font Format.
Creati per l'uso sul Web e sviluppati da Mozilla insieme ad altre organizzazioni, i caratteri WOFF spesso si caricano più velocemente di altri formati perché utilizzano una versione compressa della struttura utilizzata dai caratteri mw2aOpenType (OTF) e TrueType (TTF). Questo formato può anche includere mw2qmetadati e informazioni sulla licenza all'interno del file del carattere.
WOFF2 è la prossima generazione di WOFF e vanta una compressione migliore dell'originale.
• mw3qSVG / SVGZ
SVG (Scalable Vector Graphics) è una ricreazione vettoriale del carattere, che lo rende molto più leggero nelle dimensioni del file e lo rende ideale anche per l'uso mobile. SVGZ è la versione zippata di SVG.
• mw4gEOT
Sta per: Embedded Open Type.
Questo formato è stato creato da mw5qMicrosoft ed è uno standard di file proprietario.
• mw6aOTF / TTF
Sta per: OpenType Font e TrueType Font.
Il formato WOFF è stato inizialmente creato come reazione a OTF e TTF, in parte perché questi formati potevano essere facilmente (e illegalmente) copiati, tuttavia, OpenType ha funzionalità a cui molti designer potrebbero essere interessati (legature e simili).
Dimensione del font
La dimensione del carattere (impostata con la proprietà mw7gfont-size) può assumere valori misurati nella maggior parte di queste unità (e altre, come le percentuali), tuttavia le unità più comuni per ridimensionare il testo sono:
• mw8qpx(pixel): il numero di pixel in altezza che vuoi che sia il testo.
• mw8wemè uguale alla dimensione del carattere impostata sull'elemento genitore dell'elemento corrente che stiamo modellando (più specificamente, la larghezza di una lettera maiuscola M contenuta all'interno dell'elemento genitore.)
• mw9qrem: Funzionano esattamente come mw9gem, tranne per il fatto che 1 mw9wrem è uguale alla dimensione del carattere impostata sull'elemento radice del documento (cioè mw-a<html>), non sull'elemento genitore.
Peso visivo
Il CSS fornisce quattro proprietà comuni per modificare il peso visivo e l'enfasi del testo:
• mw-gfont-style: Utilizzato per attivare e disattivare il testo in corsivo. I valori possibili sono i seguenti:
• mwaqenormal: Imposta il testo sul carattere normale (disattiva il corsivo esistente).
• mwaqmitalic: Imposta il testo per utilizzare la mwaqqversione corsivo del carattere, se disponibile; se non disponibile, simulerà invece il corsivo con l'obliquo.
• mwaqyoblique: Imposta il testo per utilizzare una versione simulata di un carattere corsivo, creato inclinando la versione normale.
• mwaqgfont-weight: Consente di impostare il livello di grassetto del testo. Questo ha molti valori disponibili nel caso in cui si dispone di molte varianti di font disponibili (come mwaqk-Light, mwaqo-Normal, mwaqs-bold, mwaqw-extrabold, mwaq0-nero, ecc.).
• mwaranormal, mwarebold: Spessore del carattere normale e mwarigrassetto
• mwarqlighter, mwarubolder: Imposta il grassetto dell'elemento corrente in modo che sia più leggero o più pesante di un gradino rispetto al grassetto dell'elemento genitore.
• mwarc100- mwarg900: valori numerici di grassetto che forniscono un controllo granulare più fine rispetto alle parole chiave sopra, se necessario.
• mwarotext-transform: Consente di impostare la trasformazione del carattere. I valori includono:
• mwar0none: Impedisce qualsiasi trasformazione.
• mwar8uppercase: Trasforma TUTTO IL TESTO IN MAIUSCOLO.
• mwaselowercase: Trasforma tutto il testo in minuscolo.
• mwasmcapitalize: Trasforma tutte le parole in modo Che La Prima Lettera Sia Maiuscola.
• mwasufull-width: Trasforma tutti i glifi in modo che vengano scritti all'interno di un quadrato a larghezza fissa, simile a un carattere a spaziatura fissa, consentendo l'allineamento, ad esempio, di caratteri latini con glifi delle lingue asiatiche (come cinese, giapponese, coreano).
• mwasctext-decoration: Imposta/deseleziona le decorazioni del testo sui caratteri.
• mwasknone: Disabilita eventuali decorazioni di testo già presenti.
• mwaswunderline: Sottolinea il testo.
• mwas4overline: Conferisce al testo una linea superiore.
• mwataline-through: Mette un mwatebarrato sul testo.
Ombreggiatura del testo
Ombra singola:
mwatytext-shadow: 4px 4px 5px red;
Ombra multipla:
mwatktext-shadow: 1px 1px 1px red,2px 2px 1px red;
Allineamento del testo
La proprietà mwat0text-align viene utilizzata per controllare il modo in cui il testo è allineato all'interno della sua casella di contenuto. I valori disponibili sono i seguenti (funzionano più o meno allo stesso modo di un qualsiasi programma di elaborazione testi):
• mwaualeft: Giustifica il testo a sinistra.
• mwauiright: Giustifica il testo a destra.
• mwauqcenter: Centra il testo.
• mwauyjustify: Allarga il testo, variando gli spazi tra le parole in modo che tutte le righe di testo abbiano la stessa larghezza.
Altezza della linea
La proprietà mwauoline-height imposta l'altezza di ogni riga di testo. Esempio:
mwauwline-height: 1.6;
Spaziatura tra lettere e parole
mwavap::first-line {letter-spacing: 4px;word-spacing: 4px;}
Stili dei caratteri
• mwavyfont-variant: Consente di passare dal maiuscolo alle alternative di caratteri normali.
• mwavgfont-kerning: Consente di attivare e disattivare le opzioni di crenatura dei caratteri.
• mwavofont-feature-settings: Consente di attivare e disattivare varie funzioni dei caratteri OpenType.
• mwavwfont-variant-alternates: Controlla l'uso di glifi alternativi per un determinato tipo di carattere.
• mwav4font-variant-caps: Controlla l'uso di glifi maiuscoli alternativi.
• mwawafont-variant-east-asian: Controlla l'utilizzo di glifi alternativi per le scritture dell'Asia orientale, come il giapponese e il cinese.
• mwawifont-variant-ligatures: Controlla quali legature e forme contestuali vengono utilizzate nel testo.
• mwawqfont-variant-numeric: Controlla l'utilizzo di glifi alternativi per numeri, frazioni e indicatori ordinali.
• mwawyfont-variant-position: Controlla l'utilizzo di glifi alternativi di dimensioni più piccole posizionati come apice o pedice.
• mwawgfont-size-adjust: Consente di regolare la dimensione visiva del carattere indipendentemente dalla dimensione effettiva del carattere.
• mwawofont-stretch: Passa tra le possibili versioni estese alternative di un dato carattere.
• mwawwtext-underline-position: Specificare la posizione delle sottolineature impostata utilizzando il valore della mwaw0text-decoration-lineproprietà mwaw4underline.
• mwaxatext-rendering: Prova a eseguire un'ottimizzazione del rendering del testo.
Stili di layout del testo
• mwaxytext-indent: Specificare quanto spazio orizzontale deve essere lasciato prima dell'inizio della prima riga del contenuto del testo.
• mwaxgtext-overflow: Consente di definire la modalità di segnalazione agli utenti del contenuto in overflow che non viene visualizzato.
• mwaxowhite-space: Definisce come vengono gestiti gli spazi bianchi e le interruzioni di riga associate all'interno dell'elemento.
• mwaxwword-break: Consente di specificare se interrompere le righe all'interno delle parole.
• mwax4direction: Definire la direzione del testo (dipende dalla lingua e di solito è meglio lasciare che HTML gestisca quella parte poiché è legata al contenuto del testo.)
• mwayahyphens: Attiva e disattiva la sillabazione per le lingue supportate.
• mwayiline-break: Rilassa o rafforza l'interruzione di riga per le lingue asiatiche.
• mwayqtext-align-last: Definisce come viene allineata l'ultima riga di un blocco o di una riga, subito prima di un'interruzione di riga forzata.
• mwayytext-orientation: Consente di definire l'orientamento del testo in una riga.
• mwaygoverflow-wrap: Consente di specificare se il browser può o meno interrompere le righe all'interno delle parole per evitare l'overflow.
• mwayowriting-mode: Consente di definire se le righe di testo sono disposte orizzontalmente o verticalmente e la direzione in cui scorrono le righe successive.
Riempimento e contorno
mwazs.module { stroke: black; }
Esempio. Tipologie di stroke:
• mwaz8fill
• mwaaestroke-dasharray
• mwaamstroke-dashoffset
• mwaaustroke-linecap
• mwaacstroke-width
Utilizzo nei software
Per scrivere del testo formattato è possibile usare editor di mwaaoeditor di testo puro, come mwaasBlocco note o mwaawgedit, e aggiungere le informazioni di stile utilizzando un particolare linguaggio di markup, in cui per ciascuna informazione esiste un marcatore specifico (mwaa0tag). Un software di visualizzazione, in grado di comprendere il linguaggio di markup, non visualizzerà i mwaa4tag, ma mostrerà il mwaa8testo puro presentandolo nello stile indicato dai mwabatag.
Tale approccio teso a nascondere la complessità è seguito anche dagli editor mwabiWYSIWYG. Alcuni di essi, però, non permettono di mwabmsalvare il testo in un mwabqfile di testo puro o in un mwabuformato aperto, ma consentono di salvare il testo (che sembra testo puro) solo in un mwabyfile binario o comunque codificato in un mwabcformato proprietario. In quest'ultimo caso, pertanto, il testo formattato non è direttamente disponibile ad un essere umano, ma è leggibile e modificabile solo a patto di possedere quel particolare editor WYSIWYG.
Esempi di formattazione creativa
Note
cite-note-11. ↑ mwadkmwadomwads2.1.1 Per i messaggi di posta (e-mail), su mwadwbertola.eu.
cite-note-22. ↑ mwaea(mwaeemwaeiEN) Arlene Rinaldi, mwaemmwaeqThe Net: User Guidelines and Netiquette, su mwaeucourses.cs.vt.edu.
cite-note-33. ↑ mwaekmwaeomwaesCSS Fonts Module Level 3, su mwaeww3.org. mwae0URL consultato il 22 febbraio 2021.
cite-note-44. ↑ mwafe(mwafimwafmEN) Timothy J. Slattery e Keith Rayner, mwafqmwafuEffects of intraword and interword spacing on eye movements during reading: Exploring the optimal use of space in a line of text, in mwafyAttention, Perception, & Psychophysics, vol.mwafc 75, n.mwafg 6, 1º agosto 2013, pp.mwafk 1275-1292, mwafoDOI:mwafs10.3758/s13414-013-0463-8. mwafwURL consultato il 22 febbraio 2021.
cite-note-55. ↑ mwagamwagemwagiFamous Quotes from Type Designers | Typophile, su mwagmtypophile.com. mwagqURL consultato il 22 febbraio 2021 mwagu(archiviato dall'mwagyurl originale il 25 agosto 2013).
cite-note-66. ↑ mwagomwagsmwagwGuida HTML: completa e dettagliata, i comandi, su mwag0HTML.it. mwag4URL consultato il 22 febbraio 2021.
cite-note-77. ↑ mwahimwahmmwahqFundamental text and font styling - Learn web development | MDN, su mwahudeveloper.mozilla.org. mwahyURL consultato il 22 febbraio 2021.
cite-note-88. ↑ mwaho(mwahsmwahwEN) mwah0mwah4Using @font-face, su mwah8CSS-Tricks. mwaiaURL consultato il 22 febbraio 2021.
cite-note-99. ↑ mwaiqErika Giulianini, mwaiumwaiyRiempimento e contorno | Grafica HTML.it, su mwaicHTML.it. mwaigURL consultato il 22 febbraio 2021.
cite-note-1010. ↑ mwaiw(mwai0mwai4EN) mwai8mwajastroke, su mwajeCSS-Tricks. mwajiURL consultato il 22 febbraio 2021.
cite-note-1111. ↑ mwajy(mwajcmwajgEN) mwajkmwajoThe 50 Best Free Pretty Fonts for Your Creative Projects, su mwajsvisme.co, 2 luglio 2018. mwajwURL consultato il 22 febbraio 2021.
Bibliografia
• mwakaIvana Tubaro, Delle lettere. Manuale di calligrafia e tipografia: dalla teoria alla progettazione, Milano, Hoepli, 2008, ISBN 978-8820340339.
Voci correlate
• mwakqFile di testo
• mwakyFormato aperto
• mwakgFormato proprietario
• mwakoLinguaggio di markup
• mwakwTesto puro
• mwak4WYSIWYG
Collegamenti esterni
• citereffoldoc(EN) Denis Howe, markup, in Free On-line Dictionary of Computing. Disponibile con licenza mwaliGFDL